import { Form, Input, Button, Checkbox,message } from 'antd'
import { useNavigate} from "react-router-dom";
import Cookies from 'js-cookie'
import './login.scss'
import axios from 'axios'

import {adminLogin} from '../../api/ums/adminApi.js'

export default function (){
	
	const gogo = useNavigate();
	 const onFinish = (values) => {
		 
	   // {username:'',password:''}
	   //发送请求，给后台，调用后api接口，获取登录结果，酌情跳转到首页或者弹窗提示
	   adminLogin(values)
	   .then((data)=>{
		   if(data.code == 200){
			   //获取token
			   const token = data.data.tokenHead+data.data.token;
			   //必须将token保存起来
			   Cookies.set("mytoken",token);
			   //成功
			   gogo("/");
			   return;
		   }else{
			     message.error({
					content: data.message,
					duration:2,
					style: {
					},
				  })
		   }
	   })
	  };
	
	  const onFinishFailed = (errorInfo) => {
	    console.log('Failed:', errorInfo);
	  };

	return  <Form
      name="basic"
	  style={{width:"300px"}}
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
		username:"admin",
		password:"macro123"
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[
          {
            required: true,
            message: '用户名不能为空',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[
          {
            required: true,
            message: '密码不能为空',
          },
		  {
		    pattern: /^\w{6,10}$/,
		    message: '密码长度在6到10位之间',
		  }
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
}